// "修改密码" 页面

import React, { Component } from 'react'
import pxPage from '../../../root/pxPage'
import { ImagePicker } from 'antd-mobile';
import { getMsg, errToast } from '../../../redux/actionCreator'
import { modifybusbind } from '../../../redux/actionCreator/modifybusiness'
import { withRouter } from "react-router-dom"
import { connect } from 'react-redux'

const deviceHight = document.documentElement.clientHeight

class Accountbind_bus extends Component {
    constructor(props) {
        super(props);

        let modify = getMsg(this.props)

        this.state = {

            multiple: false,
            business_id: modify.business_id,

            business_phone: '',
            business_email: '',

            business_password: '',
            business_password_en: '',
        }

        this.handleChangephone = this.handleChangephone.bind(this)
        this.handleChangemail = this.handleChangemail.bind(this)
        this.handleChangepassword = this.handleChangepassword.bind(this)
        
    }

    handleChangephone = (e) => {
        this.setState({ business_phone: e.target.value })
    }
    handleChangemail = (e) => {
        this.setState({ business_email: e.target.value })
    }
    handleChangepassword = (e) => {
        this.setState({ business_password: e.target.value })
    }
    
    render() {

        let modify = getMsg(this.props)
        return (
            <div style={{ minHeight: '100vh', display: 'flex', width: '100%' }}>

                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>

                    <div style={{ width: '90%', margin: '0 auto' }}>
                        <div style={{ height: '20px' }}></div>
                        <i className="iconfont icon-fanhui" style={{ fontSize: '1.7em' }} onClick={() => this.props.history.goBack()}></i>
                        <div style={{ fontSize: '1.5em', fontWeight: 'bold', paddingTop: '25px', paddingBottom: '20px' }}>修改绑定</div>
                        <div style={accountbind_addspdiv}>
                            <div className='addsp-div-div' style={accountbind_addspdivdiv}>
                                <div style={accountbind_addspdivfour}>修改邮箱</div>
                                <div style={accountbind_addspdiveit}>输入密码</div>

                                {/* 修改email */}
                                <input
                                    className='addsp-form-input-three'
                                    style={accountbind_addspinputthree}
                                    placeholder={modify.business_email}
                                    type='email'
                                    value={this.state.business_email}
                                    onChange={this.handleChangemail}
                                ></input>

                                {/* 密码 */}
                                <input
                                    className='addsp-form-input-six'
                                    style={accountbind_addspinputsix}
                                    placeholder='输入密码来验证'
                                    type='password'
                                    value={this.state.business_password}
                                    onChange={this.handleChangepassword}
                                ></input>

                            </div>
                            <div className='addsp-div-div-two' style={accountbind_addspdivdivtwo}>
                                <div
                                    style={accountbind_addspdivdivtwoi}
                                    onClick={() => {
                                      
                                        if (this.state.business_email !== '' && this.state.business_password === '') {
                                            errToast('修改邮箱需要输入密码进行身份确认')

                                        } else {

                                            this.props.dispatch(
                                                modifybusbind(getMsg(this.props).business_id,
                                                    this.state.business_email,
                                                    this.state.business_password,
                                                    this.props
                                                ))
                                        }
                                    }
                                    }
                                >
                                    <i style={{ fontSize: pxPage(44) }} className='iconfont icon-duigou'></i>
                                </div>
                                <div
                                    style={accountbind_addspdivdivtwoii}
                                    onClick={() => {
                                        this.props.history.goBack()

                                    }}
                                >
                                    <i style={{ fontSize: pxPage(44) }} className='iconfont icon-cancel'></i>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div style={{ flex: '1' }}></div>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    login: state.login,
})
export default withRouter(connect(mapStateToProps)(Accountbind_bus))

const accountbind_addspdiv = {
    width: '100%',
    // height: `${deviceHight - 30}px`,
    paddingTop: pxPage(15),
    borderTop: '1px solid #fff'
}
const accountbind_addspdivdiv = {
    // width: pxPage(338),
    height: `${deviceHight - 350}px`,
    backgroundColor: 'rgb(212, 118, 102)'
}
const accountbind_addspdivdivtwo = {
    width: '100%',
    // height: pxPage(50),
    position: 'relative',
    backgroundColor: 'black'
}
const accountbind_addspdivdivtwoi = {
    position: 'absolute',
    left: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}
const accountbind_addspdivdivtwoii = {
    position: 'absolute',
    right: pxPage(64),
    top: pxPage(15),
    fontSize: pxPage(44)
}

// 输入框样式
//修改邮箱
const accountbind_addspinputthree = {
    width: pxPage(170),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(170),
    padding: pxPage(8),
    borderRadius: pxPage(10)
}

//输入旧密码
const accountbind_addspinputsix = {
    width: pxPage(170),
    height: pxPage(30),
    position: 'absolute',
    right: pxPage(30),
    top: pxPage(245),
    padding: pxPage(8),
    borderRadius: pxPage(10)
}
//修改邮箱
const accountbind_addspdivfour = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(185),
    fontSize: pxPage(15)
}
const accountbind_addspdiveit = {
    width: pxPage(160),
    height: pxPage(30),
    position: 'absolute',
    left: pxPage(40),
    top: pxPage(255),
    fontSize: pxPage(15)
}